import React, {forwardRef, useEffect, useState} from 'react';
import {Form,Input,Select} from "antd";

const {Option}=Select


const UserForm = forwardRef((props,ref) => {

    const [isDisabled,setIsDisabled]=useState(false)
    const {roleId,region}=JSON.parse(localStorage.getItem('token'))

    useEffect(()=>{
        setIsDisabled(props.isUpdateDisabled)
    },[props.isUpdateDisabled])

    const checkRegionDisabled=(item)=>{
        if(props.isUpdate){
            if(roleId===1){
                return false
            }else {
                return true
            }
        }else {
            if(roleId===1){
                return false
            }else {
                return item.value!==region
            }
        }
    }
    const checkRoleDisabled=(item)=>{
        if(props.isUpdate){
            if(roleId===1){
                return false
            }else {
                return true
            }
        }else {
            if(roleId===1){
                return false
            }else {
                return item.id!==3
            }
        }
    }

    return (
        <Form
            ref={ref}
            name="basic"
            layout={"vertical"}
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: 'Please input your username!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: 'Please input your username!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="区域"
                name="region"
                rules={isDisabled?[]:[{ required: true, message: 'Please input your username!' }]}
            >
                <Select disabled={isDisabled}>
                    {
                        props.regionList.map((item)=>{
                            return <Option value={item.value} key={item.id} disabled={checkRegionDisabled(item)}>{item.title}</Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item
                label="角色名"
                name="roleId"
                rules={[{ required: true, message: 'Please input your username!' }]}
            >
                <Select onChange={(value)=>{
                    if(value===1){
                        setIsDisabled(true)
                        ref.current.setFieldsValue({
                            region:''
                        })
                    }else {
                        setIsDisabled(false)
                    }
                }}>
                    {
                        props.roleList.map((item)=>{
                            return <Option value={item.id} key={item.id} disabled={checkRoleDisabled(item)}>{item.roleName}</Option>
                        })
                    }
                </Select>
            </Form.Item>
        </Form>
    );
})

export default UserForm;